<template>
  <div class="drag-area-size-droplist" :style="getStyle('root')">
    <a-dropdown overlayClassName="idm_dev_theme" placement="bottom">
      <a class="ant-dropdown-link" @click.prevent>
        {{ selectDataInfo.showText }}
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu @click="clickMenu">
          <template v-for="(item, index) in dragAreaSizeList">
            <a-menu-divider v-if="item.type == -1" :key="index" />
            <a-sub-menu v-else-if="item.type == 2" :key="item.key" class="drag-sub-menu">
              <template #title>
                <div class="dropdown-option-item" :class="{ active: selectDataInfo.key == item.key }">
                  <span>{{ item.showText }}</span>
                  <CheckOutlined v-if="selectDataInfo.key == item.key" />
                </div>
              </template>
              <a-menu-item key="9999" style="text-align: center">
                  <div
                    class="dropdown-option-item active"
                    style="padding-right: 0"
                  >
                    <SaveOutlined />
                    <span style="padding-left: 4px;">保存当前尺寸</span>
                  </div>
                </a-menu-item>
                <a-menu-divider key="9998" />
                <a-menu-item
                  v-for="(sitem, subindex) in item.subList"
                  :key="sitem.key"
                >
                  <div
                    class="dropdown-option-item"
                    :class="{ active: selectDataInfo.subKey === sitem.key }"
                  >
                    <CheckOutlined />
                    <span>{{ sitem.showText }}</span>
                    <DeleteOutlined @click="deleteItem(subindex)" />
                  </div>
                </a-menu-item>
            </a-sub-menu>
            <a-menu-item :key="item.key" v-else>
              <div class="dropdown-option-item" :class="{ active: selectDataInfo.key == item.key }">
                <CheckOutlined />
                <span>{{ item.showText }}</span>
              </div>
            </a-menu-item>
          </template>
        </a-menu>
      </template>
    </a-dropdown>
    <div>
      <a-input-number
        style="width:64px"
        size="small"
        :min="100"
        :max="2500"
        v-model:value="selectDataInfo.width"
        @change="setSelectDataInfo"
      ></a-input-number>
    </div>
    <div class="symbol-multiply-by">
      <CloseOutlined />
    </div>
    <div>
      <a-input-number
        style="width: 64px"
        size="small"
        :min="100"
        :max="5000"
        v-model:value="selectDataInfo.height"
        @change="setSelectDataInfo"
      ></a-input-number>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, toRefs, getCurrentInstance } from 'vue'
import { DownOutlined, CheckOutlined, SaveOutlined, DeleteOutlined, CloseOutlined } from '@ant-design/icons-vue';
import HJP from '@/utils/install';
const getCurrentIns = getCurrentInstance()
const proxy:any = getCurrentIns?.proxy
const props = defineProps({
  height: String,
  adaptScreen: Object,
  fullScreenStatus: Boolean,
  changeHandle: {
    type: Function,
    require: true
  }
})

const state = reactive({
  /**
   * type: -1 线条
   * type:1 适应当前布局,会根据屏幕变化而自动变化，当全屏时候也会自动变成全屏的大小
   * type:2  自定义，拥有子菜单的
   * type:9  保存当前尺寸的操作
   * type:8  自定义保存的尺寸
   * type:3  系统内置的尺寸
   */
  dragAreaSizeList: [
    {
      key: "1",
      width: props.fullScreenStatus ? props.adaptScreen?.fullWidth : props.adaptScreen?.fullWidth,
      height: props.fullScreenStatus ? props.adaptScreen?.fullHeight : props.adaptScreen?.fullHeight,
      showText: "适应当前",
      type: 1
    },
    {
      key: "2",
      showText: "自定义",
      type: 2,
      subList: [],
    },
    {
      key: "-1",
      type: -1,
    },
    ...HJP.setting.dragAreaSizeList
  ],
  selectDataInfo: {
    key: "1",
    width: props.fullScreenStatus ? props.adaptScreen?.fullWidth : props.adaptScreen?.minWidth,
    height: props.fullScreenStatus ? props.adaptScreen?.fullHeight : props.adaptScreen?.minHeight,
    showText: "适应当前",
    type: 1,
    subKey: null
  }
})
// 获取自定义的尺寸
let cacheCustomList = window.localStorage.DragAreaSizeCustomList;
if (cacheCustomList && cacheCustomList.indexOf("[{") === 0) {
  cacheCustomList = JSON.parse(cacheCustomList);
  const customList = state.dragAreaSizeList.filter((item) => item.type === 2);
  customList[0].subList = cacheCustomList;
}
const { selectDataInfo, dragAreaSizeList } = toRefs(state)

// 文本框自定义更改事件
function setSelectDataInfo() {
  // 把selectDataInfo转变成自定义，并且再次去判断自定义中是否已经存在的宽高，存在则勾选上 把selectDataInfo的subKey带上
  const customList:any = state.dragAreaSizeList.filter(item => item.type === 2)
  if (customList.length > 0) {
    state.selectDataInfo.key = customList[0].key
    state.selectDataInfo.showText = customList[0].showText
    state.selectDataInfo.type = 2
    const selectObject = customList[0].subList.filter((item: { width: any; height: any; }) => item.width === state.selectDataInfo.width && item.height === state.selectDataInfo.height)
    if (selectObject.length > 0) {
      state.selectDataInfo.subKey = selectObject[0].key
    } else {
      state.selectDataInfo.subKey = null
    }
  }
}

// 自定义删除
function deleteItem(subindex: number) {
  const customList = state.dragAreaSizeList.filter(item => item.type === 2)
  const newCustomList:any = customList[0].subList?.splice(subindex, 1)
  window.localStorage.DragAreaSizeCustomList = JSON.stringify(
    newCustomList[0].subList
  );
  proxy.$message.success("删除成功！");
}

// 下拉框选择改变事件
function clickMenu({ key }: any) {
  const selectObject: any = state.dragAreaSizeList.filter(item => item.key === key)
  if (key === '9999') {
    // 保存当前尺寸，保存到缓存中
    const customList = state.dragAreaSizeList.filter(item => item.key === '2')
    const isexist = customList[0].subList?.some((item:any) => {
      return item.width === state.selectDataInfo.width && item.height === state.selectDataInfo.height
    })
    if (!isexist) {
      (customList[0].subList as any)?.push({
        key: Date.now(),
        width: state.selectDataInfo.width,
        height: state.selectDataInfo.height,
        showText: `${state.selectDataInfo.width}*${state.selectDataInfo.height}`,
        type: 8,
      });
      window.localStorage.DragAreaSizeCustomList = JSON.stringify(
        customList[0].subList
      );
      proxy.$message.success('保存成功！')
    } else {
      proxy.$message.warn('目标尺寸已存在, 不需要重复保存。')
    }
    return
  }
  if (selectObject.length === 0) {
    const customList:any = state.dragAreaSizeList.filter(item => item.key === '2')
    if (customList.length > 0) {
      state.selectDataInfo.key = customList[0].key
      state.selectDataInfo.showText = customList[0].showText
      state.selectDataInfo.subKey = key
    }
  }
  if (selectObject.length === 1) {
    state.selectDataInfo.key = selectObject[0].key
    state.selectDataInfo.showText = selectObject[0].showText
    state.selectDataInfo.width = selectObject[0].width
    state.selectDataInfo.height = selectObject[0].height
    state.selectDataInfo.subKey = null
  }
}
const getStyle = (key: string) => {
  const styles:any = {}
  switch (key) {
    case 'root':
      styles.height = props.height + 'px';
      styles['line-height'] = props.height + 'px'
      break
    default:
      break
  }
  return styles
}
</script>

<style lang="scss" scoped>
.drag-area-size-droplist{
  display: flex;
  justify-content: center;
  > div {
    padding: 0px 3px;
  }
  .ant-dropdown-link {
    white-space: nowrap;
  }
  .symbol-multiply-by{
    opacity: 0.2;
  }
}
.dropdown-option-item{
  padding-left: 20px;
  padding-right: 20px;
  display: inline-block;
  position: relative;
  .anticon{
    display: none;
    position: absolute;
    left: 0;
    top: 3px;
    &.anticon-delete{
      display: inline-block;
      position: relative;
      left: initial;
      top: initial;
      margin-left: 10px;
      opacity: 0.4;
      transition: all linear 0.2s;
      &:hover {
        opacity: 0.6;
      }
    }
  }
  &.active{
    .anticon{
      display: inline-block;
    }
  }
}
</style>
